<template>
  <el-form
    ref="loginForm"
    class="login-form"
    status-icon
    :rules="loginRules"
    :model="loginForm"
    label-width="0"
  >
    <el-form-item
      v-if="isShowTenantCode"
      prop="tenantCode"
    >
      <el-input
        v-model="loginForm.tenantCode"
        size="small"
        autocomplete="on"
        :placeholder="$t('login.tenantCode')"
        @keyup.enter.native="handleLogin"
      >
        <i
          slot="prefix"
          class="icon-canshu"
        />
      </el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input
        v-model="loginForm.phone"
        size="small"
        auto-complete="off"
        :placeholder="$t('login.phone')"
        @keyup.enter.native="handleLogin"
      >
        <i
          slot="prefix"
          class="icon-shouji"
        />
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input
        v-model="loginForm.code"
        size="small"
        auto-complete="off"
        :placeholder="$t('login.code')"
        @keyup.enter.native="handleLogin"
      >
        <i
          slot="prefix"
          class="icon-yanzhengma"
          style="margin-top:6px;"
        />
        <template slot="append">
          <span
            class="msg-text"
            :class="[{display:msgKey}]"
            @click="handleSend"
          >{{ msgText }}</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        size="small"
        type="primary"
        class="login-submit"
        @click.native.prevent="handleLogin"
      >{{ $t('login.submit') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/* eslint-disable */
import { isvalidatemobile } from '@/utils/validate'
import { mapGetters } from 'vuex'
import { sendCode } from '@/api/user'
export default {
  name: 'Codelogin',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('请输入6位数的验证码'))
      } else {
        callback()
      }
    }
    return {
      msgText: '',
      msgTime: '',
      msgKey: false,
      checked: false,
      isShowTenantCode: true,
      loginForm: {
        code: '',
        phone: '',
        tenantCode: ''
      },
      loginRules: {
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }],
        tenantCode: [{
          required: true,
          message: '请输入租户编码',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.msgText = this.config.MSGINIT
    this.msgTime = this.config.MSGTIME
  },
  mounted() {
    // if (this.website.isTenant) {
    //   this.$store
    //     .dispatch('GetTenantCode').then((res) => {
    //       this.$store.commit('SET_LOGO', res.logo)
    //       if (res.tenantCode) {
    //         this.loginForm.tenantCode = res.tenantCode
    //         this.isShowTenantCode = false
    //       } else {
    //         this.isShowTenantCode = true
    //       }
    //     })
    // }
  },
  computed: {
    ...mapGetters(['tagWel', 'website']),
    config() {
      return {
        MSGINIT: this.$t('login.msgText'),
        MSGSCUCCESS: this.$t('login.msgSuccess'),
        MSGTIME: 60
      }
    }
  },
  props: [],
  methods: {
    handleSend() {
      if (this.msgKey) return
      this.$refs.loginForm.validateField('phone', valid => {
        // eslint-disable-next-line
        if (valid != '') {
          return
        }
        if (this.loginForm.phone) {
          sendCode({
            phone: this.loginForm.phone,
            tenantCode: this.loginForm.tenantCode
          }).then(() => {
            this.$message.success('验证码发送成功')
            this.msgText = this.msgTime + this.config.MSGSCUCCESS
            this.msgKey = true
            const time = setInterval(() => {
              this.msgTime--
              this.msgText = this.msgTime + this.config.MSGSCUCCESS
              // eslint-disable-next-line
              if (this.msgTime == 0) {
                this.msgTime = this.config.MSGTIME
                this.msgText = this.config.MSGINIT
                this.msgKey = false
                clearInterval(time)
              }
            }, 1000)
          })
        }
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中,请稍后。。。',
            spinner: 'el-icon-loading'
          })

          this.$store.dispatch('LoginByPhoneCode', this.loginForm).then(() => {
            this.$router.push({ path: this.tagWel.value })
            loading.close()
          }).catch(err => {
            loading.close()
            this.$message.error(err.data.message)
          })
        }
      })
    }
  }
}
</script>

<style>
.msg-text {
  display: block;
  width: 60px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.msg-text.display {
  color: #ccc;
}
</style>
